<template>
  <div class="Login">
    <div class="login_img">
      <img src="../assets/image/loginLogo.png" alt="" />
    </div>
    <h3 class="title">心动语聊，想聊就聊</h3>
    <!-- <div class="login_input">
      <p>
        <span class="login_span">+86</span>
        <input
          type="text"
          v-model="phone"
          placeholder="请输入手机号码"
          maxlength="11"
          @change="teltest()"
        />
      </p>
    </div>
    <div class="login_input">
      <p class="a">
        <img src="../assets/image/mima.png" alt="" />
        <input v-model="code" placeholder="请输入验证码" maxlength="6" />
        <button class="login_code" @click="getCode" :disabled="isClick">
          {{ yzmtext }}
        </button>
      </p>
    </div> -->
    <!-- <div class="login_input" style="color: red">{{ txt }}</div> -->
    <div class="box">
      <van-field
        class="zh"
        v-model="phone"
        size="large"
        label="+86"
        label-width="100"
        placeholder="请输入手机号"
      />
      <br />
      <van-field
        class="zh"
        size="large"
        v-model="code"
        placeholder="请输入验证码"
      >
        <template #button>
          <div class="code" v-if="totalTime === 60" @click="getCode">
            获取验证码
          </div>
          <div class="code" v-else>请等待{{ totalTime }}S</div>
        </template>
      </van-field>
    </div>
    <div class="login_btn_box">
      <button class="login_btn" @click="goLogin">登 陆</button>
    </div>

    <p class="footer" v-show="hideshow">
      <img src="../assets/image/gou.png" alt="" />登陆视为注册并同意隐私协议
    </p>
  </div>
</template>

<script>
import { userSms, login } from "../api/reply";

export default {
  data() {
    return {
      phone: "",
      code: "",
      yzmtext: "获 取",
      isClick: false,
      to: "",
      hideshow: true,
      txt: "",
      totalTime: 60,
    };
  },
  methods: {
    //登陆
    goLogin() {
      if (this.phone && this.code !== "") {
        login({
          mobile: this.phone,
          code: this.code,
        }).then((res) => {
          if (res.code == 0) {
            localStorage.setItem("access_token", res.data.token);

            //如果来自哪个定向
            if (this.to == "") {
              this.$router.push({
                path: "/GoldCoinRecharge",
              });
            } else {
              this.$router.push(this.to);
            }
          } else {
            this.$toast({
              message: "登陆失败！",
              position: "bottom",
            });
          }
        });
      } else {
        // alert("请正确填写手机号或验证码");
        this.$toast({
          message: "请正确填写手机号或验证码",
          position: "bottom",
        });
      }
    },
    //验证码获取
    getCode() {
      console.log(this.code);
      if (this.phone == "") {
        this.$toast.fail("手机号不能为空！");
      } else {
        this.isClick = true;
        userSms({
          phone: this.phone,
          scene: 1, //1是登陆  5是绑定手机号   6是修改手机号
          // areaCode: "",
        }).then((res) => {
          if (res.code == 0) {
            this.totalTime--;
            let timer = setInterval(() => {
              this.totalTime--;

              if (this.totalTime <= 0) {
                this.isClick = false;
                this.totalTime = 60;
                clearInterval(timer);
              }
            }, 1000);
          } else {
            this.$toast({
              message: res.msg,
              position: "bottom",
            });
          }
        });
      }
    },
    //手机号码效验
    teltest() {
      const reg = /^[1]\d{10}$/;
      if (
        this.phone == "" ||
        this.phone.length <= 10 ||
        !reg.test(this.phone)
      ) {
        // alert("手机号码错误");
        this.$toast({
          message: "手机号码错误",
          position: "bottom",
        });
        return false;
      } else {
        console.log("手机号码正确");
        return true;
      }
    },
  },
  created() {
    console.log("来自", this.$route.query.path);
    if (this.$route.query.path) {
      this.to = this.$route.query.path;
    }
  },
  mounted() {
    // window.onresize监听页面高度的变化
    // window.onresize = () => {
    //   return (() => {
    //     this.showHeight = document.body.clientHeight;
    //   })();
    // };
  },
  watch: {
    // showHeight: function () {
    //   if (this.docmHeight > this.showHeight) {
    //     this.hideshow = false;
    //   } else {
    //     this.hideshow = true;
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
.Login {
  // background: #19162a;
  height: 100%;
  position: relative;
  .login_img {
    display: flex;
    justify-content: center;
    padding: 80px 0px 36px 0px;
    img {
      width: 120px;
      height: 100px;
      object-fit: cover;
    }
  }
  .title {
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 40px;
  }
  .login_btn_box {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding: 0 36px 50px;
    .login_btn {
      width: 100%;
      height: 48px;
      background: linear-gradient(90deg, #d853ff 0%, #7439ff 100%);
      border: 1px solid #19162a;
      border-radius: 25px;
      display: inline-block;
      line-height: 35px;
      text-align: center;
      color: white;
      font-size: 17px;
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #999999;
    font-size: 14px;
    letter-spacing: 2px;
    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  }
  .box {
    padding: 20px 36px;
    .zh {
      // border: 1px solid #ccc;
      // height: 50px;
      background: #f3f3f3;
      border-radius: 40px;
      // padding: 8px 10px;
    }
    .code {
      // width: 50px;
      // height: 22px;
      color: #aa66f5;
      // border-radius: 10px;
    }
  }
}
</style>